<template>
  <div>
    <div
      style="
        width: 100%;
        height: 320px;
        padding: 10px;
        background-color: #f5f7fa;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
      "
    >
      <div style="display: flex; align-items: center; height: 30px">
        <div style="min-width: 80px; margin-right: 15px; font-weight: 600">
          任务信息
        </div>
        <el-button plain>编辑</el-button>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        <div style="min-width: 80px">任务名称：</div>
        <div>万科园区人员聚集管控计划</div>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        <div style="min-width: 80px">任务算法：</div>
        <div>区域人数超员</div>
      </div>
      <div style="display: flex; align-items: center; height: 30px">
        <div style="min-width: 80px">任务计划：</div>
        <div style="margin-top: 180px"><time-selection /></div>
      </div>
    </div>
    <div style="display: flex; height: 620px; margin-top: 10px">
      <div style="width: 355px; height: 100%; border-right: 1px solid #e4e7ed">
        <el-input
          v-model="input3"
          placeholder="Please input"
          class="input-with-select"
          style="width: 340px; height: 40px"
        >
          <template #append>
            <el-button :icon="Search" @click="fn" />
          </template>
        </el-input>
        <div
          style="
            width: 340px;
            height: calc(100% - 50px);
            margin-top: 10px;
            overflow: hidden;
            overflow-y: auto;
          "
        >
          <div
            v-for="item in 30"
            :key="item"
            style="
              display: flex;
              justify-content: space-between;
              width: 98%;
              height: 30px;
              padding: 0 12px 0 8px;
              margin-bottom: -1px;
              line-height: 30px;
              border: 1px solid #dcdfe6;
              border-radius: 5px;
            "
          >
            <div>13楼-47-西面通道ACB92FBED60D</div>
            <div style="color: #8dd16b">在线</div>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          flex: 1;
          flex-wrap: wrap;
          justify-content: space-between;
          height: 90%;
          padding-left: 15px;
        "
      >
        <div
          style="flex-basis: calc(25% - 10px); height: calc(50% - 15px)"
          v-for="item in 8"
          :key="item"
        >
          <el-image
            class="w-full h-[210px]"
            style="border-radius: 5px"
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            fit="fill"
          />
          <div style="font-size: 14px" class="flex">
            <div>摄像头：</div>
            <div>{{ "13楼-30-西面通道ACB92FBED60D" }}</div>
          </div>
          <div style="color: #409eff; cursor: pointer">绘制检测区域</div>
        </div>
      </div>
    </div>
    <div
      style="
        display: grid;
        place-items: center;
        height: 45px;
        margin-top: 15px;
        background: #f5f7fa;
        border: 1px solid #e4e7ed;
        border-radius: 8px 8px 0 0;
      "
    >
      <el-button type="primary">保存</el-button>
    </div>
    <canvas-area-pop-ups v-if="false" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import timeSelection from "./timeSelection.vue";
import canvasAreaPopUps from "./canvasAreaPopUps.vue";
import { Search } from "@element-plus/icons-vue";

const input3 = ref<string>();
const fn = () => {
  console.log(123);
};
</script>
<style scoped>
::-webkit-scrollbar {
  display: block;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #c6cad1;
  border-radius: 5px;
  box-shadow: none !important;
}
</style>
